<template>
    <div class="box">
        <div class="item" @click=activeindex(1)>
            <img v-if='active==1' src="../assets/img/footer/f1.png" alt="">
            <img v-if='active!=1' src="../assets/img/footer/f1_n.png" alt="">

            <div  class="title" :class="active==1?'activestyle':''">首页</div>
        </div>
        <div class="item" @click=activeindex(2)>
            <img v-if='active==2' src="../assets/img/footer/f2.png" alt="">
            <img v-if='active!=2' src="../assets/img/footer/f2_n.png" alt="">

            <div  class="title" :class="active==2?'activestyle':''">分类</div>
        </div>
        <div class="item" @click=activeindex(3)>
            <img v-if='active==3' src="../assets/img/footer/f3.png" alt="">
            <img v-if='active!=3' src="../assets/img/footer/f3_n.png" alt="">

            <div  class="title" :class="active==3?'activestyle':''">我的需求</div>
        </div>
        <div class="item" @click=activeindex(4)>
            <img v-if='active==4' src="../assets/img/footer/f4.png" alt="">
            <img v-if='active!=4' src="../assets/img/footer/f4_n.png" alt="">

            <div  class="title" :class="active==4?'activestyle':''">我的</div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Footer",
        data(){
            return{
                active:1,
            }
        },
        props: ["select"],
        methods: {
            activeindex(index) {
                this.active=index
                this.$emit('activeindex', index)
                if(this.active==1){
                    this.$router.push({name:'index'})
                }else if(this.active==2){
                    this.$router.push({name:'classify'})
                }else if(this.active==3){
                    this.$router.push({name:'car'})
                }else if(this.active==4){
                    this.$router.push({name:'mine'})
                }
            },
        },
        created () {
            this.active = this._props.select; // 获取父组件的参数值
           
        },
        
    }
</script>

<style  scoped>
    .box{
        width:100%;
        height:92px;
        background: #fff;
        display: flex;
        
    }
    .item{
        width:25%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }
    .item .title{
        font-size:20px;
        font-weight:bold;
        color:rgba(102,102,102,1);
    }
    .item img{
        width:45px;
        height:45px;
    }
    .activestyle{
        font-size:20px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(68,193,65,1)!important;
    }

</style>